// pages/car/car.js
var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
const filter = require('../../../utils/filter')
const util = require('../../../utils/util')
const {
  getCarList
} = require('../../../api/car')
Page(filter.loginCheck({
  data: {
    headerNavList:[
      {
        name:'分类查找',
        icon:'../../../img/fangdajing.png',
        url:'../car_search/car_search'
      },
      {
        name:'归还车辆',
        icon:'../../../img/p.png',
        url:'../car_info/car_info'
      }, {
        name:'注册车辆',
        icon:'../../../img/cheliangzhuanru.png',
        url:'../car_register/car_register'
      }, {
        name:'我的车辆',
        icon:'../../../img/myCar.png',
        url:'../my_car/my_car'
      },
    ],
    height: '',
    latitude: '',
    longitude: '',
    statusDic: {
      '1': '../../../img/point.png',
      '0': '../../../img/point0.png'
    },
    carList: [],
    //地图标记点数组
    markers: [],
  },
  //点击导航
  handleTapNav(e){
    const {url} = e.currentTarget.dataset.item
    wx.navigateTo({url})
  },
  //获取车辆列表并渲染
  async fetchCarList() {
    try {
      wx.showLoading({
        title: '加载中'
      })
      const res = await getCarList()
      this.loadCarLocation(res.data)
    } catch (e) {
      console.log(e);
    } finally {
      wx.hideLoading()
    }
  },
  //加载车辆位置
  loadCarLocation(carList) {
    let markList = []
    let i = 0
    const timer = setInterval(async () => {
      if (i < carList.length) {
        //解析车辆地址
        const res = await util.findCarLocation(carList[i].address)
        markList.push({
          id: i,
          title: carList[i].type,
          latitude: res.result.location.lat,
          longitude: res.result.location.lng,
          iconPath: this.data.statusDic[carList[i].status],
          width: 40,
          height: 40,
          callout: {
            content: `车辆类型:${carList[i].type} 状态:${carList[i].status == '1' ? '可用' : '不可用'}
                    \n地址:${carList[i].address}`,
            display: 'BYCLICK',
            color: '#333333',
            bgColor: '#fff',
            padding: 10,
            borderRadius: 10,
            borderColor: '#fff',
            fontSize: 16,
            borderWidth: 5,
            textAlign: 'center',
          }
        })
        this.setData({
          markers: markList
        })
        i++
      }else{
        clearInterval(timer)
      }
    }, 1000)
  },
  onLoad() {
    let that = this
    // 监听窗口高度
    wx.getSystemInfo({
      success: (res) => {
        that.setData({
          height: res.windowHeight - 120
        })
      },
    })
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'F4OBZ-Q23WX-A2U4S-7QQUE-LREYT-JSB3S'
    });
  },
  onShow() {
    this.fetchCarList()
    this.getLocation()
  },
  getLocation() {
    let that = this
    wx.getLocation({
      success: (res) => {
        const {
          latitude,
          longitude
        } = res
        that.setData({
          latitude,
          longitude
        })
      }
    })
    let mpCtx = wx.createMapContext("mymap");
    mpCtx.moveToLocation();
  },
}))